<template>
  <div class="advanced_setting">
    <div class="form_con">
      <div class="form_item">
        <div class="form_title">剪辑名称：</div>
        <div class="content_con">
          <a-input
            v-model:value="advanceForm.title"
            class="theme_color"
            placeholder="请输入"
          />
        </div>
      </div>

      <div class="form_item">
        <div class="form_title">关联项目：</div>
        <div class="content_con"  ref="content_con">
          <a-select
            placeholder="请输入"
            style="width: 200px;"
            :value="advanceForm.merchant_library_id"
            @change="handleChange"
            :getPopupContainer="
            triggerNode => {              
                return triggerNode.parentNode;
            }
            "
          >
            <a-select-option
              v-for="(item, index) in libraryList"
              :key="index"
              :value="String(item.id)"
              :option="item"
              class="libraryitem"
              >{{ item.name }}</a-select-option
            >
          </a-select>
          <a-button class="theme_color" @click="businessVisible = true"
            >创建</a-button
          >
        </div>
      </div>

      <div class="form_item">
        <div class="form_title">导出文件夹：</div>
        <div class="content_con">
          <a-select
            placeholder="请输入"
            style="width: 200px"
            v-model:value="advanceForm.merchant_folder_statck_id"
          >
            <a-select-option
              v-for="(item, index) in folderData"
              :key="index"
              :value="String(item.id)"
            >
              {{ item.folder_name }}</a-select-option
            >
          </a-select>
          <a-button class="theme_color" @click="folderVisible = true"
            >创建</a-button
          >
        </div>
      </div>
    </div>

    <div class="form_con">
      <div class="form_item">
        <div class="form_title">画面比例：</div>
        <div class="content_con" >
          <div class="aspect_ratio_con">
            <div
              @click="chooseRatio(index)"
              class="aspect_ratio_item"
              :class="currentRatio == index ? 'active' : ''"
              :style="aspectStyle(item)"
              v-for="(item, index) in aspectRatioList"
              :key="index"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="form_item">
        <div class="form_title">背景填充：</div>
        <div class="content_con">
          <div class="background_fill">
            <div
              @click="chooseFill(index)"
              :class="currentFill == index ? 'active' : ''"
              class="fill_item"
              v-for="(item, index) in backgroundFill"
              :key="index"
            >
              <div class="fill_inner" :style="fillStyle(item)">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <NewMerchant
      :visible="businessVisible"
      @onCancel="businessVisible = false"
      @onSubmit="closeBUsinessModal"
    />

    <!-- 新建文件夹 -->
    <NewFolder
      :visible="folderVisible"
      :groupData="{
        merchant_library_id: advanceForm.merchant_library_id,
        ...currentLibrary,
      }"
      @onCancel="folderVisible = false"
      @onSubmit="closeFolder"
    />

    <baseModel ref="dialog" title="" content="" @submit="submit"> 
    <template #title>
      <span style="font-size: 18px;"> 确定切换关联商家吗? </span>
    </template>

    <template #content>
      <span style="font-size: 14px;"> 切换关联商家将清空已添加的素材，需要重新添加 </span>
    </template>

    </baseModel>
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  watch,
  onMounted,
} from "vue";
import NewMerchant from "../../../../MaterialCenter/modules/NewMerchant.vue";
import NewFolder from "./NewFolderMaterial.vue";
import request from "../../../../../../common/utils/request";
import store from "../../../../../../store";
import { INITIAL_CLIP_JSON } from "../../../../../../store/modules/shotstack";
import baseModel from '@/components/baseModel/baseModel.vue'
export default defineComponent({
  components: {
    NewMerchant,
    NewFolder,
    baseModel
  },
  setup(props, context) {
    const dialog = ref(null);
    const content_con = ref(null)
    const state = reactive({
      businessVisible: false,
      advanceForm: {
        title: store.getters.clipJSON.title,
        aspect_ratio: store.getters.clipJSON.aspect_ratio,
        merchant_library_id: String(store.getters.clipJSON.merchant_library_id),
        merchant_folder_statck_id: String(
          store.getters.clipJSON.merchant_folder_statck_id
        ),
        background_filling: store.getters.clipJSON.background_filling,
      },
      aspectRatioList: [
        {
          name: "9:16",
          width: "37.6875px",
          height: "67px",
        },
        {
          name: "16:9",
          width: "119.111px",
          height: "67px",
        },
        {
          name: "1:1",
          width: "67px",
          height: "67px",
        },
      ],
      backgroundFill: [
        {
          value: 1,
          name: "背景虚化",
          url: new URL(
            `../../../../../../common/image/workShotstackImage/back_xuhua.png`,
            import.meta.url
          ).href,
        },
        {
          value: 2,
          name: "黑色填充",
          url: "",
        },
      ],
      currentRatio: 0,
      currentFill: 0,
      libraryList: [],
      folderVisible: false,
      currentLibrary: {},
      folderData: [],
    });

    const getFolderList = (params) => {
      let obj = {};
      obj.merchant_library_id = state.advanceForm.merchant_library_id;
      obj.folder_use_type = 2;
      obj.material_type = "video";
      obj.group_id = params.group_id;
      state.folderData = [];

      request
        .post("/work_ai", "/user/shotstack/folder/list", obj)
        .then((res) => {
          state.folderData = res.result?.data;
          if (params?.isFirst) {
            return;
          }
          state.advanceForm.merchant_folder_statck_id = res.result?.data?.[0]
            ?.id
            ? String(res.result?.data?.[0]?.id)
            : "";
        });
    };

    const getLibraryList = () => {
      let params = {
        page: 1,
        pageSize: 100,
      };
      request
        .get("/work_ai", "/user/shotstack/library/withGroup/list", params)
        .then((res) => {
          state.libraryList = res.result;
          state.currentLibrary["group_id"] = state.libraryList.find(
            (i) => i.id == state.advanceForm.merchant_library_id
          )?.default_group_id;
          // getFolderList(state.currentLibrary);
        });
    };

    watch(
      () => state.currentLibrary?.group_id,
      (val, oldVal) => {
        if (val && oldVal === undefined) {
          getFolderList({ isFirst: true, ...state.currentLibrary });
        }
      }
    );

    watch(
      () => store.getters.clipJSON.title,
      (val) => {
        state.advanceForm.title = val;
      },
      { immediate: true }
    );
    watch(
      () => store.getters.clipJSON.aspect_ratio,
      (val) => {
        state.currentRatio = state.aspectRatioList?.findIndex(
          (i) => i.name === val
        );
        state.currentRatio = state.currentRatio == -1 ? 0 : state.currentRatio;
        state.advanceForm.aspect_ratio = val;
      },
      { immediate: true }
    );
    watch(
      () => store.getters.clipJSON.merchant_library_id,
      (val, oldVal) => {
        state.advanceForm.merchant_library_id = String(val);
        if (val && oldVal && val != oldVal) {
          getFolderList(state.currentLibrary);
        }
      },
      { immediate: true }
    );
    watch(
      () => store.getters.clipJSON.merchant_folder_statck_id,
      (val) => {
        state.advanceForm.merchant_folder_statck_id = String(val);
      },
      { immediate: true }
    );
    watch(
      () => store.getters.clipJSON.background_filling,
      (val) => {
        state.currentFill = state.backgroundFill?.findIndex(
          (i) => i.value == val
        );
        state.currentFill = state.currentFill == -1 ? 0 : state.currentFill;
        state.advanceForm.background_filling = val;
      },
      { immediate: true }
    );

    watch(
      () => state.advanceForm,
      (val) => {
        store.dispatch("SetClipInfo", val);
      },
      { deep: true }
    );

    const handleChange = (val, data) => {
      dialog.value.showModal()
    };

    // 弹窗 确定回调
    const submit = ()=>{
       state.advanceForm.merchant_library_id = val;
          state.currentLibrary.group_id = data?.option.default_group_id;
          // getFolderList(state.currentLibrary);
          store.dispatch("SetClipInfo", {
            ...INITIAL_CLIP_JSON,
            ...state.advanceForm,
            id: store.getters.clipJSON.id,
            edit_model: store.getters.clipJSON.edit_model,
          });
          dialog.value.closeModal()
    }

    const aspectStyle = computed(() => {
      return function (item) {
        return {
          width: item.width,
          height: item.height,
        };
      };
    });

    const fillStyle = computed(() => {
      return function (item) {
        return {
          backgroundImage: item.url ? `url(${item.url})` : "",
        };
      };
    });

    const chooseRatio = (index) => {
      if (state.currentRatio == index) return;
      state.currentRatio = index;
      state.advanceForm.aspect_ratio = state.aspectRatioList[index].name;
    };

    const chooseFill = (index) => {
      if (state.currentFill == index) return;
      state.currentFill = index;
      state.advanceForm.background_filling = state.backgroundFill[index].value;
    };

    const closeBUsinessModal = () => {
      state.businessVisible = false;
      getLibraryList();
    };

    const closeFolder = () => {
      state.folderVisible = false;
      getFolderList(state.currentLibrary);
    };

    setTimeout(() => {
      getLibraryList();
    }, 50);

    return {
      ...toRefs(state),
      aspectStyle,
      fillStyle,
      content_con,
      dialog,
      chooseRatio,
      chooseFill,
      handleChange,
      closeBUsinessModal,
      closeFolder,
      submit
    };
  },
});
</script>

<style lang="less"  scoped>
.theme_color {
  background-color: #333;
  color: #fff;
  border: none;
  transform: translateY(1px);

  &:hover {
    background-color: #333;
  }
}


.ant-select-dropdown {
  background-color: #2323d1 !important;
}

::v-deep(.ant-select-dropdown ){
  background-color: #2323d1 !important;
}

:deep(.ant-select-dropdown ){
  background-color: #2323d1;
}



.advanced_setting {
  padding: 20px;
  display: flex;

  .form_con {

    .form_item {
      display: flex;
      align-items: center;
      margin-top: 20px;
      :deep(.ant-select-dropdown){
          background-color: #2d2df7 !important;
        }
      .form_title {
        color: #999;
        width: 100px;
        text-align: right;
      }

      .content_con {

        .libraryitem{
          background-color: #2323d1 !important;
          font-size: 30px;

          &:hover{
            background-color: #d11f1f !important;
            font-size: 30px;
          }
        }


        .aspect_ratio_con {
          display: flex;
          align-items: center;

          .aspect_ratio_item {
            background-color: #2b2b2e;
            border-radius: 3px;
            border: 1px solid #3e3d3f;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            margin-left: 10px;

            &:hover {
              border: 1px solid #2878FFff;
            }

            &.active {
              border: 1px solid #2878FFff;
            }
          }
        }

        .background_fill {
          display: flex;
          align-items: center;

          .fill_item {
            width: 67px;
            height: 67px;
            background-color: #2b2b2e;
            border-radius: 3px;
            border: 1px solid #3e3d3f;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            margin-left: 10px;

            .fill_inner {
              width: 55px;
              height: 55px;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 10px;
              text-align: center;
              background-color: #000;
              border-radius: 3px;
            }

            &:hover {
              border: 1px solid #2878FFff;
            }

            &.active {
              border: 1px solid #2878FFff;
            }
          }
        }
      }
    }
  }
}

/deep/ .ant-select-dropdown{
        background-color: #2d2df7 !important;
        font-size: 30px !important;

      }
</style>
